<template>
  <div class="register-form">
    <div class="register-form-inner">
      <div class="register-form-title">注册新用户</div>
      <div class="register-form-desc"></div>

      <div class="register-form-row">
        <div class="register-form-item">
          <div class="register-form-input-title">手机号</div>
          <div class="register-form-input-content">
            <el-input v-model="phone" placeholder="请输入" maxlength="11" clearable></el-input>
          </div>
        </div>

        <div style="width: 11px"></div>

        <div class="register-form-item">
          <div class="register-form-input-title">昵称</div>
          <div class="register-form-input-content">
            <el-input v-model="nickname" placeholder="请输入" maxlength="32" clearable></el-input>
          </div>
        </div>
      </div>

      <div class="register-form-row">
        <div class="register-form-item">
          <div class="register-form-input-title">密码</div>
          <div class="register-form-input-content">
            <el-input v-model="password" placeholder="请输入" type="password" maxlength="32" clearable></el-input>
          </div>
        </div>

        <div style="width: 11px"></div>

        <div class="register-form-item">
          <div class="register-form-input-title">确认密码</div>
          <div class="register-form-input-content">
            <el-input
              v-model="confirmPassword"
              type="password"
              maxlength="32"
              placeholder="请输入"
              clearable
            ></el-input>
          </div>
        </div>
      </div>

      <div class="login-form-remember-me">
        <div class="nas tse" style="display: flex" @click="agreeTreaty()">
          <img style="margin-top: 2px" v-if="isAgreeTreaty" src="@/assets/product-color-checked.png" />
          <img v-else style="margin-top: 2px" src="@/assets/product-color-checked-n.png" />

          <div style="padding-left: 8px">请阅读并同意</div>
        </div>

        <div style="display: flex">
          <div class="register-form-sing-up-for-free nas tse" @click="showTreaty(1)">《用户注册协议》</div>
          <div class="register-form-sing-up-for-free nas tse" style="color: #828698" @click="agreeTreaty()">和</div>
          <div class="register-form-sing-up-for-free nas tse" @click="showTreaty(2)">《隐私政策》</div>
        </div>
      </div>

      <div v-if="submitLoading" class="register-form-login-btn nac">
        <el-icon class="el-icon-loading"></el-icon>
        正在注册...
      </div>
      <div v-else class="register-form-login-btn nas tse" @click="commit()">注 册</div>

      <div class="reigster-form-split"></div>

      <div class="register-form-desc-title">
        <div class="register-form-desc-title-1">已有账号?</div>
        <div class="register-form-desc-title-2 nas tse" style="margin-left: 8px" @click="toLogin()">登录 ~</div>
        <div class="register-form-desc-title-1" style="margin-left: 8px; margin-right: 8px">或</div>
        <div class="register-form-desc-title-2 nas tse" @click="toLoginUseGuest()">以游客身份进入 ~</div>
      </div>
    </div>

    <RegisterTreaty v-if="registerTreatyDg" @close="registerTreatyDg = false" />
    <PrivacyPolicy v-if="privacyPolicyDg" @close="privacyPolicyDg = false" />
  </div>
</template>

<script>
import RegisterTreaty from '@/components/items/registerTreaty.vue'
import PrivacyPolicy from '@/components/items/privacyPolicy.vue'
import { register } from '@/api/api'

export default {
  name: 'registerForm',

  components: { RegisterTreaty, PrivacyPolicy },

  data() {
    return {
      registerTreatyDg: false,
      privacyPolicyDg: false,

      isAgreeTreaty: false,

      submitLoading: false,

      phone: '',
      nickname: '',
      password: '',
      confirmPassword: ''
    }
  },

  mounted() {},

  methods: {
    async commit() {
      if (!this.phone) {
        this.$toast('请输入手机号', {
          type: 'error'
        })
        return
      }

      if (!this.$isPhoneNo(this.phone)) {
        this.$toast('请输入正确的手机号', {
          type: 'error'
        })
        return
      }

      if (!this.nickname) {
        this.$toast('请输入昵称', {
          type: 'error'
        })
        return
      }

      if (!this.password) {
        this.$toast('请输入密码', {
          type: 'error'
        })
        return
      }

      if (!this.password) {
        this.$toast('请输入确认密码', {
          type: 'error'
        })
        return
      }

      if (this.password !== this.confirmPassword) {
        this.$toast('两次输入的密码不一致，请重新输入', {
          type: 'error'
        })
        return
      }

      if (!this.isAgreeTreaty) {
        this.$toast('请阅读并同意《用户注册协议》和《隐私政策》', {
          type: 'error'
        })
        return
      }

      this.submitLoading = true
      const res = await register({
        phone: this.phone,
        nickname: this.nickname,
        password: this.$md5(this.password)
      }).catch(() => {
        this.submitLoading = false
      })
      this.submitLoading = false

      if (res && res.code === 200) {
        this.$toast('注册成功', {
          type: 'success'
        })

        this.toLogin()
      }
    },

    agreeTreaty() {
      this.isAgreeTreaty = !this.isAgreeTreaty
    },

    toLogin() {
      this.$emit('login')
    },

    toLoginUseGuest() {
      this.$store.dispatch('setAccount', '')
      this.$store.dispatch('setToken', '')
      this.$store.dispatch('setAccountId', '')
      this.$store.dispatch('setNickname', '')
      this.$store.dispatch('setIsLogin', false)

      this.$router.push('/')
    },

    showTreaty(type) {
      if (type === 1) {
        this.registerTreatyDg = true
      } else {
        this.privacyPolicyDg = true
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.register-form {
  width: 100%;

  display: flex;
  justify-content: center;

  .register-form-inner {
    width: 559px;

    .register-form-title {
      font-size: 32px;
      font-weight: 600;
      line-height: 24px;
      color: #0e2845;
    }

    .register-form-desc {
      margin-top: 31px;
      margin-bottom: 84px;
      font-size: 14px;
      font-weight: 500;
      line-height: 20px;
      color: #828698;
    }

    .register-form-row {
      margin-top: 33px;

      display: flex;
      align-items: center;

      .register-form-item {
        flex: 1;

        .register-form-input-title {
          font-size: 20px;
          font-weight: 400;
          line-height: 20px;
          color: #828698;
        }

        .register-form-input-content {
          margin-top: 21px;
          height: 72px;
          border: 1px solid #d7d8dd;
          border-radius: 8px;

          /deep/ .el-input__inner {
            border: 0px solid gray !important;
            border-radius: 8px !important;
            font-size: 20px !important;
            font-weight: 400 !important;
            line-height: 72px !important;
            height: 72px !important;
            color: #0e2845 !important;
          }

          /deep/ .el-input__suffix .el-input__clear {
            font-size: 20px !important;
            margin-right: 8px;
          }

          /deep/ .el-input__inner::placeholder {
            color: #cccccc;
          }
          /* 谷歌 */
          /deep/ .el-input__inner::-webkit-input-placeholder {
            color: #cccccc;
          }
          /* 火狐 */
          /deep/ .el-input__inner:-moz-placeholder {
            color: #cccccc;
          }
          /deep/ /*ie*/
          .el-input__inner:-ms-input-placeholder {
            color: #cccccc;
          }
        }
      }
    }

    .register-form-login-btn {
      width: 232px;
      margin-top: 20px;
      line-height: 72px;
      border-radius: 8px;
      text-align: center;
      font-size: 24px;
      font-weight: 600;
      color: #f7f7f7;
      background: #f4aa69;
    }

    .register-form-desc-title {
      margin-top: 30px;
      margin-bottom: 39px;

      display: flex;
      align-items: center;

      .register-form-desc-title-1 {
        font-size: 14px;
        font-weight: 400;
        line-height: 24px;
        color: #828698;
      }

      .register-form-desc-title-2 {
        margin-left: 4px;
        font-size: 14px;
        font-weight: 400;
        line-height: 24px;
        color: #0b5596;
      }
    }

    .reigster-form-split {
      margin-top: 53px;
      width: 559px;
      height: 1px;
      background: #d7d8dd;
    }

    .register-form-sing-up-for-free {
      font-size: 14px;
      font-weight: 400;
      line-height: 24px;
      color: #f4aa69;
    }
  }

  .login-form-remember-me {
    margin-top: 60px;

    display: flex;
    align-items: center;

    font-size: 0;

    img {
      width: 16px;
      height: 16px;
    }

    div {
      font-size: 14px;
      font-weight: 400;
      line-height: 20px;
      color: #828698;
    }
  }
}
</style>
